<template>
  <div class="my-personal">
    <!-- 个人资料 -->
    <van-nav-bar class="navtop" title="个人资料">
      <van-icon slot="left" name="arrow-left" @click="$router.back()" />
    </van-nav-bar>
    <!-- 资料编辑区域 -->
    <van-form validate-first class="van-formm">
      <!-- 头像 -->
      <div class="images">
        <span class="yangshi">头像:</span>
        <!-- :src="user.photo" -->
        <van-image
          round
          class="img"
          @click="$refs.file.click()"
          src="https://img.yzcdn.cn/vant/cat.jpeg"
        />
      </div>
      <!-- 头像 input 上传框 -->
      <input type="file" hidden ref="file" @change="onFileChange" />
      <div class="underline" />
      <!-- 姓名 -->
      <van-field
        v-model="username"
        name="username"
        label="姓名:"
        :rules="[{ pattern, message: '请输入正确的姓名' }]"
        maxlength="4"
      />
      <div class="underline" />
      <!-- 性别 -->
      <div class="xb">
        <van-field name="radio" label="性别:">
          <template #input>
            <van-radio-group v-model="radio" direction="horizontal">
              <van-radio name="1">男</van-radio>
              <van-radio name="2">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
      </div>
      <div class="underline" />
      <!-- 手机号码 -->
      <van-field
        v-model="number"
        name="number"
        label="手机号码:"
        :rules="[{ validator, message: '请输入正确的手机号' }]"
        maxlength="11"
      />
      <div class="underline" />
      <!-- 服务区域 -->
      <van-field
        readonly
        clickable
        name="area"
        :value="region"
        label="服务区域:"
        placeholder="点击选择省市区"
        @click="showArea = true"
      />
      <van-popup v-model="showArea" position="bottom">
        <van-area
          :area-list="areaList"
          @confirm="onConfirm"
          @cancel="showArea = false"
        />
      </van-popup>
      <div class="underline" />
      <!-- 详细地址 -->
      <van-field v-model="address" name="address" label="详细地址:" />
      <div class="underline" />
      <!-- 手机号验证 -->
      <div class="xb">
        <span class="yangshi">手机验证码:</span>
        <button class="captcha">获取验证码</button>
      </div>
    </van-form>
    <!-- 提交认证 -->
    <button class="preservation" @click="save">保存</button>

    <!-- 编辑头像 -->
    <van-popup
      v-model="isUpdatePhotoShow"
      position="bottom"
      style="height: 100%"
    >
      <update-photo
        v-if="isUpdatePhotoShow"
        :img="imgs"
        @close="isUpdatePhotoShow = false"
        @update-photo="user.photo = $event"
      />
    </van-popup>
  </div>
</template>

<script>
import UpdatePhoto from './updatephoto'
import Area from './area'

export default {
  name: 'MyPersonal',
  components: {
    UpdatePhoto
  },
  data () {
    return {
      username: window.localStorage.getItem('uname'),
      number: window.localStorage.getItem('mobile'),
      service: '',
      address: window.localStorage.getItem('dizhi'),
      verification: '',
      // 性别
      radio: window.localStorage.getItem('sex'),
      // 姓名验证
      pattern: /^[\u4e00-\u9fa5]{2,4}$/,
      // 个人信息
      user: {},
      // 头像弹出层
      isUpdatePhotoShow: false,
      // 预览的图片
      imgs: null,
      // 服务区域
      areaList: window.localStorage.getItem('diqu1') || Area,
      region: window.localStorage.getItem('diqu2'),
      showArea: false
    }
  },
  watch: {
    username (value) {
      window.localStorage.setItem('uname', value)
    },
    areaList (value) {
      window.localStorage.setItem('diqu1', value)
    },
    region (value) {
      window.localStorage.setItem('diqu2', value)
    },
    address (value) {
      window.localStorage.setItem('dizhi', value)
    },
    number (value) {
      window.localStorage.setItem('mobile', value)
    },
    radio (value) {
      window.localStorage.setItem('sex', value)
    }
  },
  methods: {
    // 手机号验证
    validator (val) {
      return /^1[3,5]\d{9}$/.test(val)
    },
    // 头像
    onFileChange () {
      // 获取文件对象
      const file = this.$refs.file.files[0]
      // 基于文章对象获取 blob 数据 ,设置给src
      this.imgs = window.URL.createObjectURL(file)
      // 预览图片弹出层
      this.isUpdatePhotoShow = true
      // 每次使用完,清空 value
      this.$refs.file.value = ''
    },
    onConfirm (values) {
      this.region = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join('/')
      this.showArea = false
    },
    // 保存按钮
    save () {
      if (this.username === '' || this.number === '') {
        return this.$toast.fail('必填项不能为空')
      }
      this.$toast.success('保存成功')
      this.$router.push('/my')
    }
  }
}
</script>

<style lang="less" scoped>
.my-personal {
  background-color: #f8f8f8;
  .navtop {
    width: 750px;
    height: 128px;
    background-color: #3f51b5;
    /deep/.van-nav-bar__content {
      height: 128px;
      .van-nav-bar__left {
        padding-left: 26px;
      }
      .van-nav-bar__title {
        font-size: 32px;
        margin-left: 72px;
        color: #fff;
        font-weight: 700;
      }
    }
  }
  .van-nav-bar .van-icon {
    font-size: 36px;
    color: #fff;
  }
  /deep/.van-uploader__upload {
    height: 110px;
    width: 110px;
    border-radius: 50%;
  }
  .van-form {
    position: relative;
  }
  .images {
    position: relative;
    height: 134px;
    .img {
      position: absolute;
      right: 0;
      top: 50%;
      width: 90px;
      height: 90px;
      transform: translate(-50%, -50%);
    }
  }
  .yangshi {
    padding-left: 20px;
    font-size: 28px;
    color: #646566;
    line-height: 134px;
  }
  .van-formm {
    background-color: #fff;
    .van-field {
      padding-left: 20px;
      height: 120px;
    }
    .underline {
      height: 2px;
      width: 100%;
      background-color: #f5f3f3;
    }
  }
  .xb {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 40px;
    /deep/.van-popup--top {
      margin-left: 600px;
      width: 150px;
    }
    .captcha {
      width: 200px;
      height: 50px;
      background-color: #3f51b5;
      color: #fff;
      font-size: 24px;
      border: none;
      font-weight: 700;
    }
  }
  .preservation {
    position: absolute;
    bottom: 0;
    left: 0;
    border: 0;
    background-color: #3f51b5;
    width: 100%;
    height: 100px;
    font-size: 28px;
    color: #ffffff;
    font-weight: 700;
  }
  // 性别下拉
  /deep/.van-dropdown-menu__bar {
    box-shadow: none;
  }
  .van-cell {
    padding-left: 20px;
    // 服务区域文字
    .van-cell__value--alone {
      color: #646566;
    }
    .textbox {
      transform: translateX(10%);
    }
  }
}
</style>
